<template>
  <div class="match-details table-theme">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>搭配--搭配详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="match_details_info">
        <el-card style="position: relative">
          <p class="title">用户信息</p>
          <dl v-if="matchInfo.user">
            <dt>
              <el-image
                class="image-head"
                :src="matchInfo.user.heard_img"
                fit="cover"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </dt>
            <dd style="width: 80%">
              <h1>用户名：{{ matchInfo.user.nickname }}</h1>
              <p style="height: 28px">ID:{{ matchInfo.user.user_id }}</p>
              <p style="height: 28px" class="store-brief">
                电话:{{ matchInfo.user.phone }}
              </p>
            </dd>
          </dl>
        </el-card>
      </div>
      <div class="match_details_edit">
        <el-card style="position: relative">
          <p class="title">搭配信息</p>
          <el-form label-width="120px">
            <el-col :span="24">
              <el-form-item label="方案名称：">
                <el-input :disabled="disabled" v-model="eidtData.name" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="搭配理念：">
                <el-input :disabled="disabled" v-model="eidtData.remark" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态：">
                <el-switch
                  :disabled="disabled"
                  v-model="eidtData.status"
                  :active-value="1"
                  :inactive-value="2"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="封面图：">
                <div class="img" v-if="disabled">
                  <el-image
                    class="image-head"
                    :src="eidtData.img"
                    fit="cover"
                  ></el-image>
                </div>
                <div class="img" v-else v-for="(item,index) in list" :key="index" :class="{activate:item.image_middle === eidtData.img}" @click="onSetImg(item.image_middle)">
                    <el-image
                    class="image-head"
                    :src="item.image"
                    fit="cover"
                  ></el-image>
                  <i class="el-icon-circle-check img_activate" v-if="item.image_middle === eidtData.img"></i>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="">
              <el-button type="primary" class="btn" @click="onEdit"
                >编辑</el-button
              >
              <el-button type="primary" class="btn" @click="onUpData">保存</el-button>
                </el-form-item>
            </el-col>
          </el-form>
        </el-card>
      </div>
      <div class="match_details_list">
        <el-card style="position: relative">
          <p class="title">商品列表：</p>
          <el-table :data="list">
            <el-table-column
              label="序号"
              align="center"
              prop="goods_id"
            ></el-table-column>
            <el-table-column label="图片" align="center">
              <template slot-scope="scope">
                <el-image
                  :src="scope.row.sku.img"
                  style="width: 50px; height: 50px; vertical-align: top"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
              label="名称"
              align="center"
              prop="goods_name"
            ></el-table-column>
            <el-table-column
              label="数量"
              align="center"
              prop="num"
            ></el-table-column>
            <el-table-column
              label="价格"
              align="center"
              prop="sku.retail_price"
            ></el-table-column>
            <el-table-column
              label="颜色"
              align="center"
              prop="sku.color"
            ></el-table-column>
            <el-table-column
              label="尺寸"
              align="center"
              prop="sku.size"
            ></el-table-column>
            <el-table-column
              label="材质"
              align="center"
              prop="sku.lining"
            ></el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
    props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      matchInfo: {},
      eidtData: {
        name: "",
        remark: "",
        img: "",
        status: 1,
        match_id:"",
        price:""
      },
      list: [],
      disabled: true,
    };
  },
  methods: {
    init() {
      let data = {
        match_id: this.id,
      };
      this.$http(this.$ApiList.MatchInfo, data).then((res) => {
        this.matchInfo = res.datas;
        this.eidtData.name = res.datas.name;
        this.eidtData.remark = res.datas.remark;
        this.eidtData.img = res.datas.img;
        this.eidtData.status = res.datas.status;
        this.eidtData.match_id = res.datas.match_id;
        this.eidtData.price = res.datas.price;
        this.list = [];
        res.datas.goods.map((item) => {
          item.goods_list.map((item2) => {
            if(item2.image_middle === res.datas.img){
              this.list.unshift(item2)
            }else{
              this.list.push(item2);
            }
          });
        });
      });
    },
    onEdit() {
      this.disabled = false;
    },
    onUpData(){
        this.$http(this.$ApiList.MatchUp,this.eidtData).then(res=>{
            this.$layer.msg(res.datas);
            this.disabled = true;
        }).then(()=>{
            this.init();
        })
    },
    onSetImg(src){
        this.eidtData.img = src
    }
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.match_details_info {
  position: relative;
  background-color: #fff;
  dl {
    display: flex;

    dt {
      margin-right: 20px;

      .el-image {
        width: 100px;
        height: 100px;
        border: solid 1px #eee;
        border-radius: 50%;
      }
    }

    dd {
      h1 {
        font-size: 18px;
        font-weight: bold;
      }

      p {
        font-size: 14px;
        color: #999;
        line-height: 28px;
      }
    }
  }
}
.match_details_edit {
  margin-top: 20px;
  background-color: #fff;
  /deep/ .el-form-item__content {
    width: 50%;
  }
  .btn {
    margin-right: 30px;
    margin-bottom: 20px;
  }
  .img {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin-right: 20px;
    border: 1px solid #999;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
      vertical-align: middle;
    }
    .img_activate{
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 999;
        font-size: 20px;
        color: #00a0e9;
    }
  }
  .activate{
      border: 1px solid #00a0e9;
  }
}
.match_details_list {
  margin-top: 20px;
}
</style>